
        

            <div class="row">
                <div class="col-lg-12">
                    <div>
                        <h1>Gallery</h1>
                    </div>
                    <div>
                        <?= $this->breadcrumb->output(); ?>
                    </div>
                </div>
            </div>
            
        <div class="ajax-container">
            <section class="row">
                <div class="col-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <div class="pull-right">
                                <span class="caret" data-toggle="collapse" data-target="#collapse-me"></span>
                                <button type="button" class="close" aria-hidden="true">×</button>
                            </div>
                            <h2 class="panel-title bold"><i class="fa fa-list-alt"></i> Preview Panel</h2>
                        </div>
                        <div class="panel-body">
                            <div class="guideline guideline-sticky bg-info">
                                <i class="fa fa-info-circle fa-lg"></i> Panel Guideline Goes Here.
                            </div>
                            
                            <div class="row selector padding-bottom">
                                <div class="col-lg-12">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default static-btn-shuffle" data-category="all">All</button>
                                        <button type="button" class="btn btn-default static-btn-shuffle" data-category="pokemon">Pokemon</button>
                                        <button type="button" class="btn btn-default static-btn-shuffle" data-category="phantom">Phantom</button>
                                        <button type="button" class="btn btn-default static-btn-shuffle" data-category="grim">Grim</button>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div id="static-shuffle-container" class="col-12">
                                    <img src="resources/images/cartoons/grim/1.jpg" alt="" data-groups="grim" class="img-thumbnail static" />
                                    <img src="resources/images/cartoons/phantom/1.jpg" alt="" data-groups="phantom" class="img-thumbnail static" />
                                    <img src="resources/images/cartoons/pokemon/1.png" alt="" data-groups="pokemon" class="img-thumbnail static" />
                                    <img src="resources/images/cartoons/grim/2.png" alt="" data-groups="grim" class="img-thumbnail static" />
                                    <img src="resources/images/cartoons/phantom/2.jpg" alt="" data-groups="phantom,pokemon" class="img-thumbnail static" />
                                    <img src="resources/images/cartoons/pokemon/2.jpg" alt="" data-groups="pokemon" class="img-thumbnail static" />
                                    <img src="resources/images/cartoons/grim/3.png" alt="" data-groups="grim" class="img-thumbnail static" />
                                    <img src="resources/images/cartoons/pokemon/3.jpg" alt="" data-groups="pokemon" class="img-thumbnail static" />
                                </div>
                            </div>
                            
                        </div>
                        <div class="panel-footer">
                            <div class="align-center">
                                Footer
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            
            <section class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h2 class="panel-title"><i class="glyphicon glyphicon-picture"></i> Static Gallery</h2>
                        </div>
                        <div class="panel-body">
                
                            <div class="row selector">
                                <div class="col-lg-12">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default static-btn-shuffle" data-category="all">All</button>
                                        <button type="button" class="btn btn-default static-btn-shuffle" data-category="pokemon">Pokemon</button>
                                        <button type="button" class="btn btn-default static-btn-shuffle" data-category="phantom">Phantom</button>
                                        <button type="button" class="btn btn-default static-btn-shuffle" data-category="grim">Grim</button>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div id="static-shuffle-container" class="col col-lg-12">
                                    <img src="resources/images/cartoons/grim/1.jpg" alt="" data-groups="grim" class="img-thumbnail static" />
                                    <img src="resources/images/cartoons/phantom/1.jpg" alt="" data-groups="phantom" class="img-thumbnail static" />
                                    <img src="resources/images/cartoons/pokemon/1.png" alt="" data-groups="pokemon" class="img-thumbnail static" />
                                    <img src="resources/images/cartoons/grim/2.png" alt="" data-groups="grim" class="img-thumbnail static" />
                                    <img src="resources/images/cartoons/phantom/2.jpg" alt="" data-groups="phantom" class="img-thumbnail static" />
                                    <img src="resources/images/cartoons/pokemon/2.jpg" alt="" data-groups="pokemon" class="img-thumbnail static" />
                                    <img src="resources/images/cartoons/grim/3.png" alt="" data-groups="grim" class="img-thumbnail static" />
                                    <img src="resources/images/cartoons/pokemon/3.jpg" alt="" data-groups="pokemon" class="img-thumbnail static" />
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </section>
            <!-- page-script -->
            <script type="text/javascript" src="<?= base_url() ?>js/scripts/gallery.js"></script>
        </div>